<template>
	<view class="">
		<view class="atlas_cont" v-for="(item,index) in atlascont" :key="index" @click="goToDetail(item.id)">
			<view class="atlas_cont_img">
				<image :src="item.wjlx" mode="widthFix"></image>
			</view>
			<view class="atlas_text">
				<view class="atlas_title">
					{{item.title}}
				</view>
				<view class="atlas_label">
					<view class="atlas_key">
						{{item.tags}}
					</view>
					<view class="">
						{{$u.timeFormat(item._createtime, 'yyyy-mm-dd')}}
					</view>
					<view class="">
						<u-icon name="eye" size="28" class="eyelogo"></u-icon>{{item.counts}}
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			atlascont: {
				type: Array,
				default () {
					return []
				}
			},
		},
		methods: {
				goToDetail(id) {
					this.$emit('child-msg', id)
			}
		}
	}
</script>

<style scoped lang="scss">
	.atlas_cont {

		display: flex;
		padding: 38rpx;
		border-bottom: 2rpx #E5E5E5 solid;

		// &:last-of-type {
		// 	border-bottom: none;
		// }

		.atlas_cont_img {
			margin-right: 40rpx;
			height: 78rpx;
			width: 72rpx;
			image{
				height: 78rpx;
				width: 72rpx;
			}
			// background: url(@/static/atlas/GF.png) no-repeat;
			// background-size: cover;
		}

		.atlas_text {
			flex: 1;

			.atlas_title {
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin-bottom: 15rpx;
				color: #000000;
			}

			.atlas_label {
				display: flex;
				font-size: 24rpx;

				>view {
					padding-right: 40rpx;
					padding-left: 30rpx;
					border-right: 2rpx #E5E5E5 solid;
					color: #666666;

					&:last-of-type {
						border: none;
					}

					&:first-child {
						padding-left: 0;
					}

					.eyelogo {
						margin-right: 10rpx;
					}

				}

				.atlas_key {
					color: #c40200;
				}
			}
		}
	}
</style>
